<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/sitem.css">
    <title>学校室内大屏</title>
</head>

<body>
    <div class="content">
        <div class="header">
            <div class="hearlog">
                <img style="width: 32px;height: 16.48px;" src="./images/indoor/logo.png" class="logoimg" />
                <h1 style="font-size: 18px;
color: #304166;">校园空气环境监控中心</h1>
            </div>
            <div class="tiems" id="time" style="font-weight: 400;">
                <span id="time-content" style="font-size: 14px;
color: #304166;"></span>
            </div>
        </div>
        <div class="kqbox">
            <div>
                <div class="kqzs" style="padding: 16px 24px;">
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <span
                            style="color: #304166;font-size: 17px;font-weight: 600;text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:1px;width: 32%;">空气质量指数</span>
                        <span id="update" style="color: rgba(48,65,102,0.5);font-size: 12px;">更新时间</span>
                    </div>
                    <div class="ybp">
                        <div id="ControlChears" style="width: 200px;height: 150px;"></div>
                    </div>
                    <!-- <div class="kqjbbox">
                        <div class="kqjb" style="border-radius: 8px;">
                            <h3 class="kqjbtxt" id="level" style="font-size: 14px;"></h3>
                            <h4 class="kqjbtxt kqjbtxtlabel"
                                style="font-size: 14px;color: rgba(48,65,102,0.5);letter-spacing: 1px;">污染级别</h4>
                        </div>
                        <div class="kqjb" style="border-radius: 8px;">
                            <h3 class="kqjbtxt" id="fcontaminants" style="font-size: 14px;"></h3>
                            <h4 class="kqjbtxt kqjbtxtlabel"
                                style="font-size: 14px;color: rgba(48,65,102,0.5);letter-spacing: 1px;">首要污染物</h4>
                        </div>
                    </div> -->
                    <div class="jutbox">
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">优</h5>
                            <div class="jdtaack"
                                style="border-radius: 10px 0px 0px 10px;background: linear-gradient(to right, #69D0CF, #87CAC9);">
                            </div>
                            <div class="jdtval">
                                <h5 style="color: rgba(48,65,102,0.5);">0</h5>
                                <h5 style="color: rgba(48,65,102,0.5);">50</h5>
                            </div>
                        </div>
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">良</h5>
                            <div class="jdtaack" style="background: linear-gradient(to right, #90C9C8, #9ECED2);"></div>
                            <div class="jdtval">
                                <h5></h5>
                                <h5 style="color: rgba(48,65,102,0.5);">10</h5>
                            </div>
                        </div>
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">轻度</h5>
                            <div class="jdtaack" style="background: linear-gradient(to right, #9FCFD3, #88C2D5);"></div>
                            <div class="jdtval">
                                <h5></h5>
                                <h5 style="color: rgba(48,65,102,0.5);">150</h5>
                            </div>
                        </div>
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">中度</h5>
                            <div class="jdtaack" style="background: linear-gradient(to right, #80BDD4, #84B3C0);"></div>
                            <div class="jdtval">
                                <h5></h5>
                                <h5 style="color: rgba(48,65,102,0.5);">200</h5>
                            </div>
                        </div>
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">重度</h5>
                            <div class="jdtaack" style="background: linear-gradient(to right, #83B2C1, #FACD86);"></div>
                            <div class="jdtval">
                                <h5></h5>
                                <h5 style="color: rgba(48,65,102,0.5);">250</h5>
                            </div>
                        </div>
                        <div class="jdtdata">
                            <h5 class="jdttxt" style="color: rgba(48,65,102,0.5);">严重</h5>
                            <div class="jdtaack"
                                style="border-radius: 0px 10px 10px 0px;background: linear-gradient(to right, #F8C37C, #EE853A);">
                            </div>
                            <div class="jdtval">
                                <h5></h5>
                                <h5 style="color: rgba(48,65,102,0.5);">300</h5>
                            </div>
                        </div>
                        <div class="zhizhen" id="zhizhenbox" style="width: 14px;height: 14px;">
                            <div class="zhizhennei" style="width: 12px;height: 12px;"></div>
                        </div>
                    </div>
                    <hr style="margin-top: 30px;border: 1px solid rgba(197,197,197,0.4);" />
                    <div style="font-size: 14px;color: #304166;margin-top: 10px;">
                        <span id="fyx"></span>
                        <span id="fcs"></span>
                    </div>
                </div>
            </div>
            <div class="kqtable" style="padding:16px 24px;">
                <div class="viewrtn">
                    <button class="fhbrtn" onclick="javascript:history.go(-1)" style="margin: 0 0 20px 0;">
                        <img src="./images/fh.png" class="fhimg" style="width: 20px;height:20px;"/>
                        <span style="font-size: 14px;color: #304166;">返回</span>
                    </button>
                </div>
                <div style="height: calc(100vh - 450px);overflow: auto;" id="mytables">
                    <table id="mytable">
                        <thead>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">监测点</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">二氧化碳 (ppm)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">甲醛 (mg/m³)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">挥发性有机物 (mg/m³)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">PM10 (mg/m³)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">PM2.5 (mg/m³)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">温度 (°C)</th>
                            <th style="font-size: 14px;color: rgba(48,65,102,0.5);">湿度 (%)</th>
                        </thead>
                        <tbody id="tbody" style="font-size: 14px;">
                            <tr>
                                <td><a href="point.html?id=300020101001&amp;name=YZ3号楼102教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼102教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg2">723.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.031</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.012</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.011</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">23.180</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">41.450</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101002&amp;name=YZ3号楼110教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼110教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg3">1242.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.001</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.001</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">20.220</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">49.740</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101011&amp;name=YZ3号楼203教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼203教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">593.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.011</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.009</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.009</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">16.600</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">51.990</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101012&amp;name=YZ3号楼209教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼209教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">476.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.006</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.019</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">16.150</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">52.050</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101021&amp;name=YZ3号楼305教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼305教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">676.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.002</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.009</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.008</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">16.550</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">52.040</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101022&amp;name=YZ3号楼313教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼313教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg3">1336.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.019</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.009</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.007</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">18.550</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">53.000</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101031&amp;name=YZ3号楼403教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼403教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg2">937.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.001</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.024</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.023</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">17.130</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">53.320</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td><a href="point.html?id=300020101032&amp;name=YZ3号楼411教室" class="trhref"
                                        style="font-size: 14px;">YZ3号楼411教室</a></td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">548.000</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.010</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.020</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.005</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label leg1">0.002</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">14.960</span></div>
                                </td>
                                <td>
                                    <div class="spanbox"><span class="label">51.970</span></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="bootombox">
            <div>
                <div class="lwbox" style="padding: 16px 24px;">
                    <div class="lwbtitle" style="font-size: 17px;padding: 0">联网率</div>
                    <div style="display: flex;align-items: center;">
                        <div id="chartDevice" style="width: 200px;height: 200px;"></div>
                        <div>
                            <div style="display: flex;align-items: center;">
                                <div
                                    style="background-color: #90C9C8;width: 10px;height: 10px;border-radius: 50%;margin-right: 10px;">
                                </div>
                                <h4 style="font-size: 12px;
color: rgba(48,65,102,0.5);">联网设备<span id="lw" style="margin-left: 5px;color: #304166;">65</span></h4>
                            </div>
                            <div style="display: flex;align-items: center;margin-top: 20px;">
                                <div
                                    style="background: #F2F5FB;;width: 10px;height: 10px;border-radius: 50%;;margin-right: 10px;">
                                </div>
                                <h4 style="font-size: 12px;
color: rgba(48,65,102,0.5);">断网设备<span id="dw" style="margin-left: 5px;color: #304166;">65</span></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kqtable" style="margin-top: 20px;padding:16px 24px;">
                <div class="radiobox" style="right: 24px;width: 98.5%;">
                    <div class="radontitle" style="margin-left: 24px;font-size: 17px;">室内各项实时数据</div>
                    <div class="radioslist">
                        <div id="radio1" class="radio activeradio">PM2.5</div>
                        <div id="radio2" class="radio">PM10</div>
                        <div id="radio3" class="radio">甲醛</div>
                        <div id="radio4" class="radio">挥发性物质</div>
                        <div id="radio5" class="radio">CO2</div>
                        <div id="radio6" class="radio">温度</div>
                    </div>
                </div>
                <div id="chartAqi24" class="chart" style="width: 100%;height: 100%"></div>
            </div>
        </div>
    </div>
    <script id="myTemplate" type="text/x-jquery-tmpl">
    <tr>
       <td><a href="${getUrl(fpointNo,fpointName)}" class="trhref" style="font-size: 14px;">${fpointName}</a></td>      
       <td><div class="spanbox"><span class="label ${getTagByCo2(fmoniterCo2)}">${fmoniterCo2}</span></div></td>
       <td><div class="spanbox"><span class="label ${getTagByHcho(fmoniterJq)}">${fmoniterJq}</span></div></td>
       <td><div class="spanbox"><span class="label ${getTagByTvoc(fmoniterYjw)}">${fmoniterYjw}</span></div></td>
       <td><div class="spanbox"><span class="label ${getTagByPm10(fmoniterPm10)}">${fmoniterPm10}</span></div></td>
       <td><div class="spanbox"><span class="label ${getTagByPm25(fmoniterPm25)}">${fmoniterPm25}</span></div></td>
       <td><div class="spanbox"><span class="label">${fwd}</span></div></td>
       <td><div class="spanbox"><span class="label">${fsd}</span></div></td>
    </tr>
</script>
</body>
<script src="./js/jquery-2.2.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/echarts.five.js"></script>
<script src="./js/jquery.ex.js"></script>
<script src="./js/api.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/device.js"></script>
<script src="./js/jquery.tmpl.min.js"></script>
<script src="./js/jquery.nicescroll.min.js"></script>
<script src="./js/indoor_base.js"></script>
<script src="./js/site_in.js"></script>

</html>